<template>
  <div>
    <table>
      <tr>
        <td>基金名称</td>
        <td>基金型号</td>
        <td>最少购买钱数</td>
        <td>利率</td>
        <td>选择购买月数</td> -->
        <td>是否自动续约</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in customerlist.data" :key="i">
        <td>{{ i.name }}</td>
        <td>{{ i.code }}</td>
        <td>{{ i.money }}</td>
        <td>{{ i.rate }}</td>
        <td>
            <select name="" id="" v-model="mtime[i.id]">
                <option :value="j" v-for="j in mlist" :key="j">{{j}}月</option>
            </select>
        </td>
        <td>
            <el-radio v-model="radio[i.id]" label="1">自动续约</el-radio>
            <el-radio v-model="radio[i.id]" label="2">不自动续约</el-radio>
        </td>
        <td>
          <van-button @click="mark_bank(i.id,i.name,i.code,i.money,i.rate)">购买基金</van-button>
        </td>
      </tr>
    </table>
    <center>
      <div v-show="show_price">
        <h1>请输入支付金额</h1>
        <van-field label="支付金额" v-model="price" style="width: 220px;"></van-field>
        <van-button @click="quese">确认</van-button>
      </div>
    </center>
    <van-popup v-model:show="show_hours" closeable close-icon="close" :style="{ height: '70%' ,width: '30%' }">
      
      <center><h1>请输入支付密码</h1></center>
      <van-field label="请输入支付密码" v-model="password" type="password"></van-field>
      <center>
        <van-button @click="queren">确认</van-button>
      </center>
    </van-popup>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity';

export default { 
    data() {
    return {
        mlist:[1,2,3,4,5,6,7,8,9,10,11,12],
        radio:{},
        show_hours: false,
        show_price: false,
        price: '',
        password: '',
        fid:'',
        fname:'',
        fcode:'',
        mtime:{},
        rate:'',
        userid:localStorage.getItem("usrid")
    }
  },
  setup(){
    let customerlist = reactive({'data':[]})
    console.log(customerlist)
    var socket = new WebSocket("ws:127.0.0.1:8000/web/");

    socket.onopen = function () {
      console.log('成功');//成功连接上Websocket

    };
    socket.onmessage = function (e) {
      customerlist.data=JSON.parse(e.data)
      console.log(customerlist)
      // 获取数据
      // alert('消息提醒: ' + e.data);//打印服务端返回的数据
    };
    socket.onclose = function () {
      console.log('关闭连接');
      socket.close(); //关闭TCP连接
    };
    //连接发生错误的回调方法
    socket.onerror = function () {
      console.log("WebSocket连接发生错误");
    }

    return{
      customerlist,
      socket
    }
  },
   methods: {
    getfundlist(){
          this.myaxios('http://127.0.0.1:8000/send/','get').then(res=>{
              console.log(res);
          })
      },
    quese() {
      this.money=(this.price/this.total_money)*this.money
      this.show_hours = true
      this.show_price = false
    },
    mark_bank(id,name,code,money,rate) {
        console.log(this.radio[this.id]);
        console.log(this.mtime);
      this.show_price = true
      this.fid=id
      console.log(this.id)
      this.fcode = code
      this.fname = name
      this.rate = rate
    },
    queren() {
        console.log(this.radio);
        console.log(this.mtime);
      this.myaxios('http://localhost:5000/fund_order_form', 'post', {
        'userid': localStorage.getItem('usrid'),
        'pay_password': this.password,
        'fund_code':this.fcode,
        'money':this.price,
        'status':this.radio[this.fid],
        'm_time':this.mtime[this.fid],
        'rate':this.rate,
        'name':this.fname
      }).then(res => {
            console.log(res)
            if (res.code=='200'){
              alert(res.msg)
            }else{
                alert(res.msg)
            }
                 
      })

    },
    
  },
  mounted(){
      this.getfundlist()
  }
}
</script>

<style>

</style>